<!-- 免密登录页 -->
<template>
	<view class="login-container">
		<view class="login-box">
			<view class="login-header">
				<view class="logo-container">
					<view class="logo-circle">
						<image :src="logo" mode="aspectFit" class="logo-icon"></image>
					</view>
					<text class="logo-text">明心鉴Mindora</text>
				</view>
				<text class="login-subtitle">心理咨询系统</text>
			</view>

			<!-- 快捷登录框 当url带参数时有效 -->
			<template v-if="['apple','weixin', 'weixinMobile', 'huawei', 'huaweiMobile'].includes(type)">
				<text class="tip">将根据第三方账号服务平台的授权范围获取你的信息</text>
				<view class="quickLogin">
					<button v-if="type === 'weixin'" @click="quickLogin" class="login-button weixin-btn">
						<text class="icon-weixin"></text>
						微信一键登录
					</button>
					<image v-else-if="type !== 'weixinMobile' && type !== 'huaweiMobile'" @click="quickLogin" :src="imgSrc" mode="widthFix"
						class="quickLoginBtn"></image>
					<view v-else style="position: relative">
						<button v-if="type ==='weixinMobile'" type="primary" open-type="getPhoneNumber" @getphonenumber="quickLogin"
							class="login-button weixin-btn">微信授权手机号登录</button>
						<button v-if="type === 'huaweiMobile'" open-type="getPhoneNumber" @getphonenumber="quickLogin"
							class="quickLoginBtn" style="padding: 0; display: flex">
							<image :src="imgSrc" mode="widthFix"></image>
						</button>
						<view v-if="this.needAgreements && !this.agree" class="mobile-login-agreement-layer" @click="showAgreementModal"></view>
					</view>
					<uni-id-pages-agreements scope="register" ref="agreements"></uni-id-pages-agreements>
				</view>
			</template>

			<!-- 手机号登录 -->
			<template v-else>
				<view class="input-group">
					<view class="phone-box">
						<view @click="chooseArea" class="area">+86</view>
						<uni-easyinput trim="both" :focus="focusPhone" @blur="focusPhone = false" class="input-box" type="number"
							:inputBorder="false" v-model="phone" maxlength="11" placeholder="请输入手机号" />
					</view>
					<text class="tip">未注册的账号验证通过后将自动注册</text>
				</view>
				
				<uni-id-pages-agreements scope="register" ref="agreements"></uni-id-pages-agreements>
				<button class="login-button" @click="toSmsPage">获取验证码</button>
			</template>

			<!-- 咨询师登录入口 -->
<!-- 			<view class="divider">或</view>
			<button class="counselor-login-btn" @click="toCounselorLogin">咨询师登录</button> -->
		</view>
		<!-- 固定定位的快捷登录按钮 -->
		<uni-id-pages-fab-login ref="uniFabLogin"></uni-id-pages-fab-login>
	</view>
</template>

<script>
	let currentWebview; //当前窗口对象
	import config from '@/uni_modules/uni-id-pages/config.js'
	import mixin from '@/uni_modules/uni-id-pages/common/login-page.mixin.js';
	export default {
		mixins: [mixin],
		data() {
			return {
				type: "", //快捷登录方式
				phone: "", //手机号码
				focusPhone: false,
				logo: "/static/logo2.jpg"
			}
		},
		computed: {
			async loginTypes() { //读取配置的登录优先级
				return config.loginTypes
			},
			isPhone() { //手机号码校验正则
				return /^1\d{10}$/.test(this.phone);
			},
			imgSrc() { //大快捷登录按钮图
				const images = {
					weixin: '/uni_modules/uni-id-pages/static/login/weixin.png',
					apple: '/uni_modules/uni-id-pages/static/app/apple.png',
					huawei: '/uni_modules/uni-id-pages/static/login/huawei.png',
					huaweiMobile: '/uni_modules/uni-id-pages/static/login/huawei-mobile.png',
				}
				return images[this.type]
			}
		},
		async onLoad(e) {
			//获取通过url传递的参数type设置当前登录方式，如果没传递直接默认以配置的登录
			let type = e.type || config.loginTypes[0]
			this.type = type

			if (type != 'univerify') {
				this.focusPhone = true
			}
			this.$nextTick(() => {
				//关闭重复显示的登录快捷方式
				if (['weixin', 'apple', 'huawei', 'huaweiMobile'].includes(type)) {
					this.$refs.uniFabLogin.servicesList = this.$refs.uniFabLogin.servicesList.filter(item =>
						item.id != type)
				}
			})
			uni.$on('uni-id-pages-setLoginType', type => {
				this.type = type
			})
		},
		onShow() {
			// #ifdef H5
			document.onkeydown = event => {
				var e = event || window.event;
				if (e && e.keyCode == 13) { //回车键的键值为13
					this.toSmsPage()
				}
			};
			// #endif
		},
		onUnload() {
			uni.$off('uni-id-pages-setLoginType')
		},
		onReady() {
			// 是否优先启动一键登录。即：页面一加载就启动一键登录
			//#ifdef APP-PLUS
			if (config.loginTypes.includes('univerify') && this.type == "univerify") {
				uni.preLogin({
					provider: 'univerify',
					success: () => {
						const pages = getCurrentPages();
						currentWebview = pages[pages.length - 1].$getAppWebview();
						currentWebview.setStyle({
							"top": "2000px" // 隐藏当前页面窗体
						})
						this.$refs.uniFabLogin.login_before('univerify')
					},
					fail: (err) => {
						console.log(err);
						if (config.loginTypes.length > 1) {
							this.$refs.uniFabLogin.login_before(config.loginTypes[1])
						} else {
							uni.showModal({
								content: err.message,
								showCancel: false
							});
						}
					}
				})
			}
			//#endif
		},
		methods: {
			showCurrentWebview() {
				// 恢复当前页面窗体的显示 一键登录，默认不显示当前窗口
				currentWebview.setStyle({
					"top": 0
				})
			},
			showAgreementModal() {
				this.$refs.agreements.popup()
			},
			quickLogin(e) {
				let options = {}
				console.log(e)
				if (e.detail?.code) {
					options.phoneNumberCode = e.detail.code
				}

				if ((this.type === 'weixinMobile' || this.type === 'huaweiMobile') && !e.detail?.code) return

				this.$refs.uniFabLogin.login_before(this.type, true, options)
			},
			toSmsPage() {
				if (!this.isPhone) {
					this.focusPhone = true
					return uni.showToast({
						title: "手机号码格式不正确",
						icon: 'none',
						duration: 3000
					});
				}
				if (this.needAgreements && !this.agree) {
					return this.$refs.agreements.popup(this.toSmsPage)
				}
				// 发送验证吗
				uni.navigateTo({
					url: '/uni_modules/uni-id-pages/pages/login/login-smscode?phoneNumber=' + this.phone
				});
			},
			//去密码登录页
			toPwdLogin() {
				uni.navigateTo({
					url: '../login/password'
				})
			},
			chooseArea() {
				uni.showToast({
					title: '暂不支持其他国家',
					icon: 'none',
					duration: 3000
				});
			},
			toCounselorLogin() {
				// 实现咨询师登录的逻辑
				console.log("咨询师登录");
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* 全局变量 */
	:root {
		--primary-color: #6c8eef;
		--primary-hover: #5a7de0;
		--secondary-color: #f8f9fa;
		--text-color: #2c3e50;
		--border-color: #dee2e6;
		--shadow-sm: 0 4rpx 8rpx rgba(0,0,0,0.05);
		--shadow-md: 0 8rpx 12rpx rgba(0,0,0,0.1);
		--shadow-lg: 0 16rpx 32rpx rgba(0,0,0,0.1);
		--radius-sm: 16rpx;
		--radius-md: 24rpx;
		--radius-lg: 32rpx;
		--spacing-sm: 16rpx;
		--spacing-md: 32rpx;
		--spacing-lg: 48rpx;
	}

	.login-container {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		min-height: 100vh;
		padding: 20rpx var(--spacing-md);
		background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	}

	.login-box {
		background: white;
		padding: var(--spacing-lg);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-md);
		width: 100%;
		max-width: 720rpx;
		min-height: 80vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
		margin: 0;
	}

	.login-header {
		text-align: center;
		margin-bottom: 40rpx;
		padding-top: 0;
	}

	.logo-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20rpx;
		margin-bottom: 30rpx;
	}

	.logo-circle {
		width: 280rpx;
		height: 280rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.logo-icon {
			width: 200%;
			height: 200%;
			object-fit: contain;
		}
	}

	.logo-text {
		font-size: 44rpx;
		font-weight: 600;
		color: var(--text-color);
		margin-top: 20rpx;
	}
	

	.login-subtitle {
		font-size: 26rpx;
		color: #6c757d;
		margin-bottom: 40rpx;
	}

	.input-group {
		margin: 30rpx 0;
	}

	.phone-box {
		position: relative;
		display: flex;
		background: var(--secondary-color);
		border-radius: var(--radius-md);
		padding: 8rpx;
		margin-bottom: var(--spacing-sm);
	}

	.area {
		position: relative;
		padding: 0 30rpx;
		color: var(--text-color);
		font-size: 28rpx;
		display: flex;
		align-items: center;

		&::after {
			content: "";
			border: 6rpx solid transparent;
			border-top-color: var(--text-color);
			position: relative;
			left: 12rpx;
		}
	}

	.input-box {
		flex: 1;
		
		:deep(.uni-easyinput__content) {
			background: transparent;
			height: 88rpx;
			
			input {
				font-size: 28rpx;
				color: var(--text-color);
			}
		}
	}

	.tip {
		font-size: 24rpx;
		color: #6c757d;
		text-align: center;
		margin: 20rpx 0;
		display: block;
	}

	.login-button {
		width: 100%;
		padding: 17rpx;
		background: var(--primary-color);
		color: white;
		border: none;
		border-radius: var(--radius-md);
		font-size: 32rpx;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--spacing-sm);
		margin: 30rpx 0;
		box-shadow: 0 4rpx 8rpx rgba(108,142,239,0.2);
		transition: all 0.3s ease;

		&:active {
			background: var(--primary-hover);
			transform: translateY(-2rpx);
			box-shadow: 0 8rpx 16rpx rgba(108,142,239,0.3);
		}
	}

	.divider {
		display: flex;
		align-items: center;
		text-align: center;
		color: #6c757d;
		font-size: 28rpx;
		margin: var(--spacing-md) 0;

		&::before,
		&::after {
			content: '';
			flex: 1;
			border-bottom: 2rpx solid var(--border-color);
		}

		&::before {
			margin-right: var(--spacing-sm);
		}

		&::after {
			margin-left: var(--spacing-sm);
		}
	}

	.quickLogin {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 30rpx 0;
		padding-bottom: 30rpx;
		
		.quickLoginBtn {
			width: 100%;
			max-width: 600rpx;
			margin-bottom: var(--spacing-md);
			border-radius: var(--radius-md);
			overflow: hidden;
		}
	}

	.counselor-login-btn {
		width: 100%;
		padding: 20rpx;
		background: white;
		color: var(--primary-color);
		border: 2rpx solid var(--primary-color);
		border-radius: var(--radius-md);
		font-size: 32rpx;
		font-weight: 500;
		margin-top: var(--spacing-md);
		transition: all 0.3s ease;

		&:active {
			background: var(--secondary-color);
			color: var(--primary-hover);
			border-color: var(--primary-hover);
		}
	}

	.weixin-btn {
		background: var(--primary-color);
		width: 100%;
		padding: 30rpx;
		color: white;
		border: none;
		border-radius: var(--radius-md);
		font-size: 32rpx;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--spacing-sm);
		margin: 30rpx 0;
		box-shadow: 0 4rpx 8rpx rgba(108,142,239,0.2);
		transition: all 0.3s ease;
		height: 100rpx;
		
		&:active {
			background: var(--primary-hover);
			transform: translateY(-2rpx);
			box-shadow: 0 8rpx 16rpx rgba(108,142,239,0.3);
		}
	}

	.icon-weixin {
		font-family: "iconfont";
		margin-right: 8rpx;
	}

	.mobile-login-agreement-layer {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	/* 适配宽屏 */
	@media screen and (min-width: 690px) {
		.login-box {
			max-width: 600rpx;
			min-height: 65vh;
		}
	}
</style>